<template>
	<view class="mydetail-body">
		
		<view class="tn-safe-area-inset-bottom tn-margin-bottom-sm" v-if="tongzhiList.length">
			<tn-list-view :card="true" :radius="true">
			  <block v-for="(item,index) in tongzhiList" :key="index">
				<!-- <tn-list-cell :arrow="true" @click="showDetail(item)">{{item.title}}</tn-list-cell> -->
				<tn-list-cell @click="showDetail(item)">
					<view class="message">
					  <view class="message__left">
						<image src="../../static/message.png"></image>
					  </view>
					  <view class="message__middle">
						<view class="message__name">{{item.title}}</view>
						<view class="message__content tn-text-ellipsis">{{item.content}}</view>
					  </view>
					  <view class="message__right">
						<view class="message__time">{{item.sendTime}}</view>
						<!-- <view class="message__tips">
						  <tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle" width="auto" size="sm">99</tn-tag>
						</view> -->
					  </view>
					</view>
				  </tn-list-cell>
			  </block>
			</tn-list-view>
		</view>
		
		<view class=" tn-flex tn-flex-row-center fullhouse" v-else>
			<!-- <tn-empty mode="data"></tn-empty> -->
			<custom-empty></custom-empty>
		</view>
	<tn-button v-if="loginType==1" class="fabu__btn" width="100rpx" height="100rpx" backgroundColor="tn-cool-bg-color-7" :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="gofabu"><text class="tn-icon-edit-form"></text></tn-button>
		
		<tn-popup
		  v-if="isshowPOP"
		  v-model="showpopup"
		  length="50%"
		  mode="center"
		  backgroundColor="#ffffff"
		  width="80%"
		  height="50%"
		  :borderRadius="10"
		  @close="closedPopup"
		>
		  <view class="popup-content tn-padding">
			  <view class="pop-title tn-margin-bottom-sm tn-text-bold">
			  	{{currentInfo.title}}
			  </view>
			  <view class="pop-time tn-margin-bottom" style="font-size: 12px;">
				{{currentInfo.sendTime}}
			  </view>
			  <view class="tongzhi-pop-content" v-html="currentInfo.content">
			  </view>
		    <tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="220rpx" backgroundColor="#79CF67" fontColor="#ffffff">关闭弹窗</tn-button>
		  </view>
		</tn-popup>
			<tn-toast
			  ref="toast"
			></tn-toast>
	</view>
</template>

<script>
	
		export default {
			name: 'tongzhi',
			data(){
				return {
					avatarUrl: 'https://tnuiimage.tnkjapp.com/blogger/blogger_beibei.jpg',
					tongzhiList: [],
					options: [
					  {
						icon: 'delete',
						style: {
						  backgroundColor: '#E83A30',
						  width: '80rpx',
						  height: '80rpx',
						  margin: '0 12rpx',
						  borderRadius: '100rpx'
						}
					  }
					],
					showpopup: false,
					isshowPOP: true,
					pageIndex: 1,
					totalPage: 0,
					currentInfo:{},
					loginType: 1,
				}
			},
			onPullDownRefresh() {
				this.pageIndex = 0;
				this.getList()
			},
			onReachBottom() {
				this.pageIndex++;
				this.getList();
			},
			mounted() {
				this.loginType = uni.getStorageSync('loginType');
				this.getList();
			},
			methods:{
				
				getList(){
					console.log(this.pageIndex, '--------', this.totalPage)
					if(this.totalPage > 0 && this.pageIndex > this.totalPage){
						this.$refs.toast.show({
						  title: '',
						  content: '没有更多了',
						  icon: '',
						  image: '',
						  duration: 1000
						})
						return;
					}
					this.request({
						url: '/sysNotice/page',
						method: 'get',
						params: {
							pageNo: this.pageIndex,
							pageSize: 10,
							isOnlySend: false
						},
					}).then(res => {
						if(res.code == 200){
							if(this.pageIndex == 1){
								this.tongzhiList = [];
							}
							this.totalPage = res.data.totalPage;
							let rows = res.data.rows;
							rows.forEach(item => {
								this.tongzhiList.push(item);
							})
							uni.stopPullDownRefresh()
						}
					})
				},
				deleteTongzhi(item){
					
				},
				  readMsg(msgId){
					  this.request({
						url: '/sysNotice/Read',
						method: 'get',
						params: {
							id: msgId
						},
					  }).then(res => {
						if(res.code == 200){
							this.pageIndex = 1;
							this.getList();
						}
					  })
				  },
				gofabu(){
					uni.navigateTo({
						url:'/pages/my/fabutongzhi'
					})
				},
				closedPopup(){
					console.log('关闭弹框-------------')
					this.showpopup = false;
					this.isshowPOP = false;
					this.$nextTick(() => {
						this.isshowPOP = true;
					})
				},
				showDetail(item){
					this.currentInfo = item;
					this.showpopup = true;
					this.readMsg(item.id);
				},
				deleteFunction(item){
						let postData = {
							id: item.id
						}
						this.request({
							url: '/sysNotice/delete',
							method: 'post',
							params: postData
						}).then(res => {
							if(res.code == 200){
								this.pageIndex = 1;
								this.getList();
							}
						})
				}
			}
		}
</script>

<style lang="scss" scoped>
	.mydetail-body{
	}
	.tn-swipe-action-item{
		border-bottom: 1px solid #dddddd;
	}
  .fabu__btn{
	  position: fixed;
	  bottom: 30%;
	  right: 10px;
  }
  .popup-content{
	  position: relative;
	  height: 100%;
  }
  .tongzhi-pop-content{
	  position: absolute;
	  top: 130rpx;
	  left: 50rpx;
	  right: 50rpx;
	  bottom: 120rpx;
	  overflow-y: auto;
  }
  .opo-bottom-btn{
	  position: absolute;
	  bottom: 20rpx;
	  left: 50%;
	  margin-left: -100rpx;
  }
  .msg-item-view{
	  width: 100%;
	  height: 120rpx;
	  position: relative;
	  border-bottom: 1px solid #dddddd;
	  .logo-pic{
		  position: absolute;
		  left: 24px;
		  top: 24px;
	  }
	  .msg-right-view{
		  position: absolute;
		  left: 55px;
		  top: 0;
		  right: 60px;
		  bottom: 0;
	  }
	  .delete-view{
		  position: absolute;
		  right: 24px;
		  top: 24px;
	  }
	  .msg-title-view{
		  margin-top: 30rpx;
	  }
	  .isread-tag{
		  position: absolute;
		  right: 15px;
		  top: 1px;
		  background-color: #e83a30;
		  color: #ffffff;
		  font-size: 12rpx;
	  }
  }
  
  .message {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      
      &__left {
        width: 80rpx;
		height: 80rpx;
		background-color: #79CF67;
		border-radius: 40rpx;
		text-align: center;
		
		image{
			width:44rpx;
			height:34rpx;
			margin-top: 23rpx;
		}
      }
      &__middle {
        flex:1;
		width: 0;
        padding-left: 20rpx;
        padding-right: 40rpx;
      }
      &__right {
        width: 200rpx;
        display: flex;
		font-size: 20rpx;
		color:#BDBFC6;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      
      &__name {
        font-size: 32rpx;
        margin-bottom: 8rpx;
      }
      &__content {
        font-size: 24rpx;
        color: #75777c;
      }
      &__tips {
        &__icon {
          font-size: 36rpx;
          color: #AAAAAA;
        }
      }
    }
</style>